<template>
    <!-- 左边回收站页面 -->
    <div>
        <div class="top">
            <el-button type="primary" :disabled="selectIdList.length == 0" @click="revertBatch">
                <span class="iconfont icon-revert"></span>
                还原
            </el-button>
            <el-button type="primary" :disabled="selectIdList.length == 0" @click="delBatch">
                <span class="iconfont icon-del"></span>
                批量删除
            </el-button>
        </div>

        <!-- 列表 -->
        <div class="file-item">
            <Table
              ref="dataTableRef"
              :columns="columns"
              :dataSource="tableData"
              :fetch="loadDataList"
              :initFetch="true"
              :options="tableOptions"
              @rowSelected="rowSelected">
              <!-- #fileName 与 定义的columns.scopedSlots有关 -->
              <template #fileName="{ index, row }">
                <!-- @mouseenter：鼠标悬停时，  @mouseleave：鼠标离开时 -->
                <div class="file-item" @mouseenter="showOp(row)" @mouseleave="cancelShowOp(row)">
                    
                    <!-- 展示预览封面 -->
                      <!-- 判断该项是否为视频或者图片，并转码成功 -->
                      <template v-if="(row.fileType == 1 || row.fileType == 3) && row.status == 2">
                        <!-- 传递封面给子组件 Icon.vue -->
                        <Icon :cover="row.fileCover" :width="55"></Icon>
                      </template>                    
                      <!-- 如果该项不是视频或图片，则 -->
                      <template v-else>
                        <!-- 判断为文件，则传递文件的类型给子组件，并匹配封面 -->
                        <Icon v-if="row.folderType == 0" :fileType="row.fileType"></Icon>
                        <!-- 判断为目录，则传递参数0给子组件 -->
                        <Icon v-if="row.folderType == 1" :fileType="0"></Icon>
                      </template>

                      <!-- 展示文件名 -->
                      <span class="file-name" :title="row.fileName">{{ row.fileName }}</span>

                      <span class="op">
                        <!-- 操作按钮 -->
                      <template v-if="row.showOp">
                        <span class="iconfont icon-link" @click="revert(row)">还原</span>
                        <span class="iconfont icon-cancel" @click="delFile(row)">删除</span>
                      </template>
                      </span>
                </div>
              </template>
              
              <!-- 文件大小 (#fileSize 与 定义的columns.scopedSlots有关 ) -->
              <template #fileSize="{ index, row }">
                <span v-if="row.fileSize">
                    {{ proxy.Utils.size2Str(row.fileSize) }}
                </span>
              </template>
            </Table>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted, computed } from "vue";
const { proxy } = getCurrentInstance();

//请求定义
const api = {
    loadDataList: "/recycle/loadRecycleList",    //获取回收站文件列表   
    recoverFile: "/recycle/recoverFile",         //从回收站还原文件
    delFile: "/recycle/delFile",                 //文件彻底删除（从数据库中删除）
};

const columns = [
    {
        label: "文件名",
        prop: "fileName",
        scopedSlots: "fileName",
    },
    {
        label: "删除时间",
        prop: "recoveryTime",
        width: "200",
    },
    {
        label: "大小",
        prop: "fileSize",
        scopedSlots: "fileSize",
        width: "200",
    },
]

const tableData = ref({});         //文件列表
const tableOptions = {
    extHeight: 20,
    selectType: "checkbox",
};


/**
 * 搜索
 */
const search = () => {
    loadDataList();
};

/**
 * 请求列表
 */
const loadDataList = async () => {
    let params = {
        pageNo: 1,
        pageSize: 10,
    };

    //发送请求
    let result = await proxy.Request({
        url: api.loadDataList, //获取数据列表
        params: params,
    });
    if (!result) {
        return;
    };
    tableData.value = result.data.recycleList;
};


const selectIdList = ref([]);    //被选中的行列
//多选 由子组件Table.vue的handelSelectionChange方法调用
const rowSelected = (rows) => {
    selectIdList.value = [];
    rows.forEach((item) => {
        selectIdList.value.push(item.fileId);   //添加
    });
};


//鼠标悬停时，展示操作按钮
const showOp = (row) => {
    //遍历数据集，给每项赋于属性showOp，用于控制操作按钮
    tableData.value.list.forEach((element) => {
        element.showOp = false;
    });
    row.showOp = true;    //当前项为被鼠标选中，展示操作按钮
};


//鼠标离开时，隐藏操作按钮
const cancelShowOp = (row) => {
    row.showOp = false;
};


/**
 * 批量还原
 */
const revertBatch = () => {
    proxy.Confirm(`你确定要还原这些文件吗？`, async () => {
        let result = await proxy.Request({
            url: api.recoverFile,
            params: { fileIds: selectIdList.value.join(",") },//将数组中所有的元素合并为一个字符串，元素之间通过指定字符进行分隔
        });
        if (!result) {
            return;
        }
        loadDataList();
     })
};


/**
 * 单个还原
 */
const revert = (row) => {
     proxy.Confirm(`你确定要还原[${row.fileName}]吗？`, async () => {
        let result = await proxy.Request({
            url: api.recoverFile,
            params: { fileIds: row.fileId }
        });
        if (!result) {
            return;
        }
        loadDataList();
     })
};


/**
 * 批量删除，从数据库删除
 */
const emit = defineEmits(["reload"]); //子组件通过触发父组件的事件，Framework.vue第93行
const delBatch = () => {
    proxy.Confirm(`你确定要删除这些文件吗？删除后无法恢复`, async () => {
        let result = await proxy.Request({
            url: api.delFile,
            params: { fileIds: selectIdList.value.join(",") },//将数组中所有的元素合并为一个字符串，元素之间通过指定字符进行分隔
        });
        if (!result) {
            return;
        }
        loadDataList();
        emit("reload");  //触发父组件方法，更新空间情况（Framework.vue第93行）
     })
};


/**
 * 单个删除，从数据库删除
 */
const delFile = (row) => {
     proxy.Confirm(`你确定要删除[${row.fileName}]吗？`, async () => {
        let result = await proxy.Request({
            url: api.delFile,
            params: { fileIds: row.fileId }
        });
        if (!result) {
            return;
        }
        loadDataList();
        emit("reload");    //触发父组件方法，更新空间情况（Framework.vue第93行）
     })
};



</script>
<style lang="scss" scoped>
@import "@/assets/file.list.scss";
.file-list {
    margin-top: 10px;
    .file-item {
        .op {
            width: 120px;
        }
    }
}
</style>